<template>
    <a-collapse :bordered="false">
        <template #expandIcon="props">
            <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
        </template>
        <a-collapse-panel key="1" :header="i18n('xAxis','X轴')">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.xAxisShow"/>
                </span>
            </template>
            <div v-if="config.styles.xAxisShow">
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="chartI18n('common.fontSize','字体大小')+'(px)'">
                            <a-input :placeholder="chartI18n('common.fontSize','字体大小')" type="number"
                                     v-model:value="config.styles.xAxisConfig.fontSize"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="chartI18n('common.fontColor','字体颜色')">
                            <a-input v-model:value="config.styles.xAxisConfig.fontColor" type="color"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="chartI18n('common.fontStyle','字体样式')">
                            <a-select v-model:value="config.styles.xAxisConfig.fontStyle">
                                <a-select-option value="normal">{{ chartI18n('common.normal', '正常') }}</a-select-option>
                                <a-select-option value="bold">{{ chartI18n('common.bold', '加粗') }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="i18n('axisColor','坐标轴轴线颜色')">
                            <rx-input-color style="margin-right: 17px" v-model="config.styles.xAxisConfig.axisColor"
                                            :color="config.styles.xAxisConfig.axisColor"></rx-input-color>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="i18n('rotationAngle','旋转角度')">
                            <a-input-number v-model:value="config.styles.xAxisConfig.rotationAngle"></a-input-number>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item>
                            <template #label>
                                {{ chartI18n("common.format", "格式化") }}
                                <a-tooltip>
                                    <template #title>
                                      <span style="width:500px;">
                                        {{ chartI18n("msa.formatTip", "提示") }}
                                      </span>
                                    </template>
                                    <QuestionCircleOutlined style="margin-left: 5px;"/>
                                </a-tooltip>
                            </template>
                            <a-button @click="setFormatter(config.styles.xAxisConfig)">
                                {{ chartI18n("common.format", "格式化") }}
                            </a-button>
                            <span v-show="config.styles.xAxisConfig.formatter" style="margin-left:5px;color: #00bb00">
							 <rx-icon-show icon="icon-linedui"></rx-icon-show>
								{{ chartI18n("common.configured", "已配置") }}
							</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item>
                            <template #label>
								{{chartI18n('common.axisName','坐标轴名称')}}
								<a-tooltip>
                                      <template #title>
                                          <span style="width:500px;">
                                            {{chartI18n("msa.axisNameColor","提示")}}
                                          </span>
                                    </template>
									 <QuestionCircleOutlined style="margin-left: 5px;"/>
								</a-tooltip>
							</template>
                            <a-switch  size="small" v-model:checked="config.styles.xAxisConfig.showName"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" v-if="config.styles.xAxisConfig.showName">
                        <a-form-item :label="chartI18n('common.nameLocation','位置')">
                            <a-select v-model:value="config.styles.xAxisConfig.nameLocation">
                                <a-select-option value="end">{{chartI18n('common.end','结尾')}}</a-select-option>
                                <a-select-option value="start">{{chartI18n('common.start','开头')}}</a-select-option>
                                <a-select-option value="center">{{chartI18n('common.center','中间')}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>
        </a-collapse-panel>
        <a-collapse-panel key="5" header="x滚动">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.dataZoomShow"/>
                </span>
            </template>
            <a-row :gutter="24" style="margin: 0px">
                <a-col :span="8">
                    <a-form-item label="最小数据条数">
                        <a-input-number v-model:value="config.styles.dataZoom.numeral"/>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="开始">
                        <a-input-number v-model:value="config.styles.dataZoom.start"></a-input-number>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="结束">
                        <a-input-number v-model:value="config.styles.dataZoom.end"/></a-form-item>
                </a-col>
            </a-row>
        </a-collapse-panel>
        <a-collapse-panel key="6" header="缩放">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.insideShow"/>
                </span>
            </template>
            <a-row :gutter="24" style="margin: 0px">
                <a-col :span="12">
                    <a-form-item label="开始">
                        <a-input-number v-model:value="config.styles.inside.start"></a-input-number>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="结束">
                        <a-input-number v-model:value="config.styles.inside.end"/></a-form-item>
                </a-col>
            </a-row>
        </a-collapse-panel>
        <a-collapse-panel key="2" :header="i18n('yAxis','Y轴')">
            <template #extra>
        <span @click.stop="">
          <a-switch size="small" v-model:checked="config.styles.yAxisShow"/>
        </span>
            </template>
            <div v-if="config.styles.yAxisShow">
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="chartI18n('common.fontSize','字体大小')+'(px)'">
                            <a-input :placeholder="chartI18n('common.fontSize','字体大小')" type="number"
                                     v-model:value="config.styles.yAxisConfig.fontSize"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="chartI18n('common.fontColor','字体颜色')">
                            <a-input v-model:value="config.styles.yAxisConfig.fontColor" type="color"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="chartI18n('common.fontStyle','字体样式')">
                            <a-select v-model:value="config.styles.yAxisConfig.fontStyle">
                                <a-select-option value="normal">{{ chartI18n('common.normal', '正常') }}</a-select-option>
                                <a-select-option value="bold">{{ chartI18n('common.bold', '加粗') }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" v-if="config.chartType=='horizontalBar'">
                        <a-form-item :label="chartI18n('common.position','位置')">
                            <a-select v-model:value="config.styles.yAxisConfig.position">
                                <a-select-option value="top">{{ chartI18n('legendConfig.top', '顶部') }}</a-select-option>
                                <a-select-option value="bottom">{{
                                        chartI18n('legendConfig.bottom', '底部')
                                    }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="i18n('rotationAngle','旋转角度')">
                            <a-input type="number" v-model:value="config.styles.yAxisConfig.rotationAngle"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="i18n('axisColor','坐标轴轴线颜色')">
                            <div class="yAxisConfig-color">
                                <div style="margin-right: 10px">
                                    <a-switch size="small" v-model:checked="config.styles.yAxisConfig.yAxisShow"/>
                                </div>
                                <div style="flex: 1" v-if="config.styles.yAxisConfig.yAxisShow">
                                    <rx-input-color v-model="config.styles.yAxisConfig.axisColor"
                                                    :color="config.styles.yAxisConfig.axisColor"></rx-input-color>
                                </div>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item>
                            <template #label>
                                {{ chartI18n("common.format", "格式化") }}
                                <a-tooltip>
                                    <template #title>
                                      <span style="width:500px;">
                                        {{ chartI18n("msa.formatTip", "提示") }}
                                      </span>
                                    </template>
                                    <QuestionCircleOutlined style="margin-left: 5px;"/>
                                </a-tooltip>
                            </template>
                            <a-button @click="setFormatter(config.styles.yAxisConfig)">
                                {{ chartI18n("common.format", "格式化") }}
                            </a-button>
                            <span v-show="config.styles.yAxisConfig.formatter" style="margin-left:5px;color: #00bb00">
								 <rx-icon-show icon="icon-linedui"></rx-icon-show>
								{{ chartI18n("common.configured", "已配置") }}
							</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="i18n('interval','间隔')">
                            <a-input type="number" v-model:value="config.styles.yAxisConfig.interval"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="i18n('min','最小刻度')">
                            <a-input type="number" v-model:value="config.styles.yAxisConfig.min"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="i18n('max','最大刻度')">
                            <a-input type="number" v-model:value="config.styles.yAxisConfig.max"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item>
                            <template #label>
                                {{chartI18n('common.axisName','坐标轴名称')}}
                                <a-tooltip>
                                    <template #title>
                                          <span style="width:500px;">
                                            {{chartI18n("msa.axisNameColor","提示")}}
                                          </span>
                                    </template>
                                    <QuestionCircleOutlined style="margin-left: 5px;"/>
                                </a-tooltip>
                            </template>
                            <a-switch  size="small" v-model:checked="config.styles.yAxisConfig.showName"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" v-if="config.styles.yAxisConfig.showName">
                        <a-form-item :label="chartI18n('common.nameLocation','位置')">
                            <a-select v-model:value="config.styles.yAxisConfig.nameLocation">
                                <a-select-option value="end">{{chartI18n('common.end','结尾')}}</a-select-option>
                                <a-select-option value="start">{{chartI18n('common.start','开头')}}</a-select-option>
                                <a-select-option value="center">{{chartI18n('common.center','中间')}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>
        </a-collapse-panel>
        <a-collapse-panel key="3" :header="i18n('yGrid','Y轴在grid区域中的分隔线')">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.yGridShow"/>
                </span>
            </template>
            <div v-if="config.styles.yGridShow">
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="i18n('lineStyleType','线类型')">
                            <a-select v-model:value="config.styles.yGrid.lineStyleType">
                                <a-select-option value="solid">solid</a-select-option>
                                <a-select-option value="dashed">dashed</a-select-option>
                                <a-select-option value="dotted">dotted</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="i18n('borderColor','线颜色')">
                            <rx-input-color v-model="config.styles.yGrid.borderColor"
                                            :color="config.styles.yGrid.borderColor"></rx-input-color>
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>
        </a-collapse-panel>
        <a-collapse-panel key="4" :header="i18n('yAxis2','第二Y轴')">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.yAxisShow2"/>
                </span>
            </template>
            <div v-if="config.styles.yAxisShow2">
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="chartI18n('common.fontSize','字体大小')+'(px)'">
                            <a-input :placeholder="chartI18n('common.fontSize','字体大小')" type="number"
                                     v-model:value="config.styles.yAxisConfig2.fontSize"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="chartI18n('common.fontColor','字体颜色')">
                            <a-input v-model:value="config.styles.yAxisConfig2.fontColor" type="color"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="chartI18n('common.fontStyle','字体样式')">
                            <a-select v-model:value="config.styles.yAxisConfig2.fontStyle">
                                <a-select-option value="normal">{{ chartI18n('common.normal', '正常') }}</a-select-option>
                                <a-select-option value="bold">{{ chartI18n('common.bold', '加粗') }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" v-if="config.chartType=='horizontalBar'">
                        <a-form-item :label="chartI18n('common.position','位置')">
                            <a-select v-model:value="config.styles.yAxisConfig2.position">
                                <a-select-option value="top">{{ chartI18n('legendConfig.top', '顶部') }}</a-select-option>
                                <a-select-option value="bottom">{{
                                        chartI18n('legendConfig.bottom', '底部')
                                    }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="i18n('axisColor','坐标轴轴线颜色')">
                            <div class="yAxisConfig-color">
                                <div style="margin-right: 10px">
                                    <a-switch size="small" v-model:checked="config.styles.yAxisConfig2.yAxisShow"/>
                                </div>
                                <div style="flex: 1" v-if="config.styles.yAxisConfig2.yAxisShow">
                                    <rx-input-color v-model="config.styles.yAxisConfig2.axisColor"
                                                    :color="config.styles.yAxisConfig2.axisColor"></rx-input-color>
                                </div>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item>
                            <template #label>
                                {{ chartI18n("common.format", "格式化") }}
                                <a-tooltip>
                                    <template #title>
                                      <span style="width:500px;">
                                        {{ chartI18n("msa.formatTip", "提示") }}
                                      </span>
                                    </template>
                                    <QuestionCircleOutlined style="margin-left: 5px;"/>
                                </a-tooltip>
                            </template>
                            <a-button @click="setFormatter(config.styles.yAxisConfig2)">
                                {{ chartI18n("common.format", "格式化") }}
                            </a-button>
                            <span v-show="config.styles.yAxisConfig2.formatter" style="margin-left:5px;color: #00bb00">
								 <rx-icon-show type="icon-linedui"></rx-icon-show>
								{{ chartI18n("common.configured", "已配置") }}
							</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="i18n('rotationAngle','旋转角度')">
                            <a-input type="number" v-model:value="config.styles.yAxisConfig2.rotationAngle"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="i18n('interval','间隔')">
                            <a-input type="number" v-model:value="config.styles.yAxisConfig2.interval"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="i18n('min','最小刻度')">
                            <a-input type="number" v-model:value="config.styles.yAxisConfig2.min"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="i18n('max','最大刻度')">
                            <a-input type="number" v-model:value="config.styles.yAxisConfig2.max"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item>
                            <template #label>
                                {{chartI18n('common.axisName','坐标轴名称')}}
                                <a-tooltip>
                                    <template #title>
                                          <span style="width:500px;">
                                            {{chartI18n("msa.axisNameColor","提示")}}
                                          </span>
                                    </template>
                                    <QuestionCircleOutlined style="margin-left: 5px;"/>
                                </a-tooltip>
                            </template>
                            <a-switch  size="small" v-model:checked="config.styles.yAxisConfig2.showName"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" v-if="config.styles.yAxisConfig2.showName">
                        <a-form-item :label="chartI18n('common.nameLocation','位置')">
                            <a-select v-model:value="config.styles.yAxisConfig2.nameLocation">
                                <a-select-option value="end">{{chartI18n('common.end','结尾')}}</a-select-option>
                                <a-select-option value="start">{{chartI18n('common.start','开头')}}</a-select-option>
                                <a-select-option value="center">{{chartI18n('common.center','中间')}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>
        </a-collapse-panel>
    </a-collapse>
</template>

<script>
/**
 * X/Y轴配置
 */
import FormatterDialog from "@/views/modules/design/dialog/formatter-dialog.vue";
import {Util} from "@lowcode/jpaas-base-lib";
import RxInputColor from "./rx-input-color.vue";

export default {
    name: "xy-axis-config",
    inject: {
        config: {
            default: () => {
                return {};
            }
        }
    },
    components: {
        RxInputColor
    },
    data() {
        return {
            xAxisConfig: {
                fontSize: 12,
                fontColor: "#ffffff",
                fontStyle: "normal",
                formatter: "",
                axisColor: 'rgba(66,133,244,0.4)',
                textAlign: 'center',
                rotationAngle: 0,
                showName:false,
                nameLocation:"end"
            },
            yAxisConfig: {
                fontSize: 12,
                fontColor: "#ffffff",
                fontStyle: "normal",
                rotationAngle: 0,
                textAlign: 'right',
                axisColor: 'rgba(66,133,244,0.4)',
                yAxisShow: false,
                interval: undefined,
                min: undefined,
                max: undefined,
                position: "bottom",
                showName:false,
                nameLocation:"end"
            },
            yAxisConfig2: {
                fontSize: 12,
                fontColor: "#ffffff",
                fontStyle: "normal",
                rotationAngle: 0,
                textAlign: 'left',
                axisColor: "#ffffff",
                yAxisShow: false,
                interval: undefined,
                min: undefined,
                max: undefined,
                position: "bottom",
                showName:false,
                nameLocation:"end"
            },
            yGrid: {
                borderColor: 'rgba(66,133,244,0.4)',
                lineStyleType: 'solid'
            }
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "lineBarLang.xyAxisConfig", key);
        },
        chartI18n(name, text, key) {
            return this.$ti18(name, text, "chartLang", key);
        },
        init() {
            //滚动配置
            if(!this.config.styles.dataZoom){
                let dataZoom = {
                    numeral:10,
                    start:0,
                    end:30
                }
                this.config.styles['dataZoom'] =dataZoom
            };
            //缩放配置
            if(!this.config.styles.inside){
                let inside = {
                    start:0,
                    end:30
                }
                this.config.styles['inside'] =inside
            }
            //x轴配置
            if (!this.config.styles.xAxisConfig) {
                this.config.styles["xAxisShow"] = true;
                this.config.styles["xAxisConfig"] = this.xAxisConfig;
            }
            //y轴配置
            if (!this.config.styles.yAxisConfig) {
                this.config.styles["yAxisShow"] = true;
                this.config.styles["yAxisConfig"] = this.yAxisConfig;
            }
            //第二y轴配置
            if (!this.config.styles.yAxisConfig2) {
                //线柱混搭默认开启双Y
                this.config.styles["yAxisShow2"] = this.config.chartType == "lineBar";
                this.config.styles["yAxisConfig2"] = this.yAxisConfig2;
            }
            //Y轴在grid区域中的分隔线
            if (!this.config.styles.yGrid) {
                this.config.styles["yGridShow"] = true;
                this.config.styles["yGrid"] = this.yGrid;
            }
        },
        setFormatter(axisConfig) {
            let self = this;
            let conf = {
                component: FormatterDialog,
                curVm: this,
                widthHeight: ['1200px', '600px'],
                title: this.chartI18n('common.format', '格式化') + "(JavaScript)",
                data: {
                    axisConfig: axisConfig,
                    defaultFormatter: "return value;"
                },
                zIndex:999,
            }
            Util.open(conf, function (action, data) {
                if (action != "ok") {
                    return;
                }
                axisConfig["formatter"] = data.formatter;
                axisConfig["formatterMode"] = data.formatterMode;
            })
        }
    },
    watch: {}
}
</script>

<style scoped>
.yAxisConfig-color {
    display: flex;
    width: 100%;
    align-items: center;
}

.componentStyle-textAlign {
    display: flex;
    height: 31px;
    border-radius: 4px;
    border: solid 1px #dedede;
    align-items: center;
    justify-items: center;
}

.componentStyle-textAlign-icon {
    flex: 1;
    height: 31px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    border-right: solid 1px #dedede
}

.componentStyle-textAlign-hover {
    color: #4285f4;
}

.componentStyle-textAlign-icon:hover {
    color: #4285f4;
}

.componentStyle-textAlign-icon:nth-child(3) {
    border: none;
}
</style>
